<template>
	<div ref="middleChart2" v-resize="resizeChart" class="chart-container"></div>
</template>

<script>
    import * as echarts from 'echarts';
    import { color, borderColor, legendTextStyle } from './chart-conf';
    import homeMixin from '../../../../../mixins/dom-resize';

    export default {
        name: 'MiddleChart2',
        props: {
            chartVal: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [homeMixin],
        data() {
            const leftAndRightRadius = '55%';
            const middleRadius = '70%';
            const dataItemConf = {
                axisLine: {
                    show: true,
                    roundCap: true,
                    lineStyle: {
                        width: 8,
                        color: [
                            [0.25, '#ed4014'],
                            [0.5, '#5cadff'],
                            [0.75, '#ff9900'],
                            [1, '#19be6b']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: '#5cadff'
                    }
                },
                splitLine: {
                    length: 8,
                    distance: 8
                },
                progress: {},
                axisTick: {
                    distance: 0
                },
                axisLabel: {
                    show: true,
                    color: '#808695',
                    distance: 8
                },
                title: {
                    show: true,
                    offsetCenter: ['0%', '60%'],
                    color: '#eee',
                    fontWeight: 700
                }
            };
            return {
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    series: [
                        {
                            ...dataItemConf,
                            name: '',
                            type: 'gauge',
                            z: 1,
                            max: 100,
                            detail: {
                                color: 'inherit',
                                fontSize: '20px',
                                offsetCenter: ['0%', '100%'],
                                formatter: '{value}%',
                                borderWidth: 1,
                                height: 22,
                                borderRadius: 6,
                                borderColor: 'inherit'
                            },
                            radius: leftAndRightRadius,
                            center: ['17%', '60%'],
                            data: [
                                {
                                    value: 50,
                                    name: '排产率'
                                }
                            ]
                        },
                        {
                            ...dataItemConf,
                            name: '',
                            type: 'gauge',
                            z: 1,
                            max: 100,
                            shape: 'circle',
                            aspectScale: 1,
                            detail: {
                                color: 'inherit',
                                offsetCenter: ['0%', '100%'],
                                valueAnimation: true,
                                fontSize: '24px',
                                formatter: '{value}%',
                                borderWidth: 1,
                                height: 22,
                                borderRadius: 6,
                                borderColor: 'inherit'
                            },
                            radius: middleRadius,
                            center: ['50%', '40%'],
                            data: [
                                {
                                    value: 50,
                                    name: '运转效率',
                                    itemStyle: {
                                        color: '#2d8cf0'
                                    }
                                }
                            ]
                        },
                        {
                            ...dataItemConf,
                            name: '',
                            type: 'gauge',
                            z: 2,
                            max: 100,
                            radius: leftAndRightRadius,
                            center: ['83%', '60%'],
                            detail: {
                                color: 'inherit',
                                fontSize: '20px',
                                offsetCenter: ['0%', '100%'],
                                formatter: '{value}%',
                                borderWidth: 1,
                                height: 22,
                                borderRadius: 6,
                                borderColor: 'inherit'
                            },
                            data: [
                                {
                                    value: 80,
                                    name: '开机率'
                                }
                            ]
                        }
                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                    this.setContainerHeight();
                });
            },
            updateChart() {
                if (this.example) {
                    this.$nextTick(() => {
                        const num1 = this.chartVal.productionSchedulingEfficiency ? this.chartVal.productionSchedulingEfficiency : 0;
                        const num2 = this.chartVal.openEfficiency ? this.chartVal.openEfficiency : 0;
                        this.option.series[0].data[0].value = Number(num1) || 0;
                        this.option.series[1].data[0].value = this.chartVal.runningEfficiency || 0;
                        this.option.series[2].data[0].value = num2 || 0;
                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.middleChart2);
                    this.updateChart();
                });
            },
            setContainerHeight() {
                const container = this.$refs.middleChart2;
                if (container) {
                    const width = container.offsetWidth;
                    container.style.height = width / 2 + 'px'; // 保持宽高比为2:1
                }
            }
        },
        mounted() {
            this.setContainerHeight();
            this.resize();
            this.initChart();
        },
        watch: {
            chartVal: {
                handler() {
                    this.initChart();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss">
.chart-container {
    width: 95%;
    //height: 340px;
    margin: auto; /* 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
